<template>
  <div>
    <div class="page-title" style="width:100%">接收任务列表</div>
    <div class="page-content">
      <el-row :gutter="10">
        <el-form label-width="87px" :inline="true" :model="filterQuery">
          <el-form-item label="检查时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="filterQuery.startDate"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="filterQuery.endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select
              v-model="filterQuery.status"
              placeholder="请选择任务状态"
              style="width:200px"
              clearable
            >
              <el-option
                v-for="item in statuss"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>&nbsp;&nbsp;&nbsp;
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleClick">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row style="text-align:center">
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          border
          v-loading="loading"
        >
          <el-table-column prop="round" label="轮次" align="center" width="80"></el-table-column>
          <el-table-column label="开始时间" prop="startDate" align="center" sortable>
            <!-- <template slot-scope="props">
              <div>{{ props.row.startDate}}~{{ props.row.endDate}}</div>
            </template>-->
          </el-table-column>
          <el-table-column label="结束时间" prop="endDate" align="center" sortable></el-table-column>
          <el-table-column prop="issueStaffName" label="下达人员" align="center"></el-table-column>
          <el-table-column prop="execStaffName" label="接收人员" align="center"></el-table-column>
          <el-table-column prop="execStatus" label="完成状态" align="center"></el-table-column>
          <el-table-column prop="status" label="接收状态" align="center"></el-table-column>
          <el-table-column prop="receiveDate" label="接收时间" align="center"></el-table-column>
          <el-table-column label="操作" width="240" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status === '已接收'"
                type="primary"
                size="mini"
                :disabled="new Date()<new Date(scope.row.startDate+' 00:00:00') || new Date()>new Date(scope.row.endDate+' 23:59:59')"
                @click="toExecuteTask(scope.row)"
              >执行任务</el-button>
              <!-- :disabled="new Date()<new Date(scope.row.startDate+' 00:00:00') || new Date()>new Date(scope.row.endDate+' 23:59:59')" -->
              <el-button
                v-if="scope.row.status != '已接收'"
                type="primary"
                size="mini"
                @click="acceptTask(scope.row)"
                :disabled="new Date()>new Date(scope.row.endDate+' 23:59:59')"
              >接收任务</el-button>
              <el-button
                type="primary"
                size="mini"
                style="margin-left:10px"
                :disabled="new Date()>new Date(scope.row.endDate+' 23:59:59')"
                @click="toCQTaskManagementIndex2(scope.row)"
              >修改任务</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-base">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="filterQuery.pageIdx"
            :page-size="filterQuery.pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <el-dialog
      title="任务详情"
      :visible.sync="dialogVisible"
      center
      width="1200px"
      :showClose="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="120px" :model="dialogFormData">
        <el-row>
          <el-col :span="6">
            <el-form-item label="开始时间：">
              <el-input v-model="dialogFormData.startDate" style="width:100%" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间：">
              <el-input v-model="dialogFormData.endDate" style="width:100%" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下达人员：">
              <el-input v-model="dialogFormData.issueStaffName" style="width:100%" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务轮次：">
              <el-input v-model="dialogFormData.round" style="width:100%" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="height:50vh;overflow: auto;">
        <el-table :data="dialogData" border :span-method="objectSpanMethod">
          <el-table-column prop="taskType" label="作业内容" align="center"></el-table-column>
          <el-table-column prop="plannedInspectionTimes" label="作业轮次" align="center" width="150"></el-table-column>
          <el-table-column prop="taskItem" label="作业项目" align="center"></el-table-column>
        </el-table>
      </el-row>
      <div slot="footer" class="dialog-footer" style="text-align:right; margin-top:5px">
        <el-button type="primary" @click="handleSubmit()">接收</el-button>
        <el-button type="danger" @click="cancelDialog()">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ExcTask, GetLoginPersonName } from '../../../services/personCenterTask'
import { GetTaskManagementDetail2 } from '../../../services/task_management'
import { GetCurrentUser } from '../../../store/CurrentUser'
import { ReceiveTask } from '../../../services/personCenterTask'

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      filterQuery: {
        startDate: '',
        endDate: '',
        status: '',
        pageIdx: 1,
        pageSize: 10,
        execStaffID: null
      },
      dialogVisible: false,
      dialogData: [],
      dialogFormData: [],
      spanArr: [],
      total: null,
      statuss: [
        {
          label: '未接收',
          value: '未接收'
        },
        {
          label: '已接收',
          value: '已接收'
        }
      ],
      currentRow: {}
    }
  },
  created() {
    this.getLoginPerson()
  },
  computed: {
    currentUser() {
      return GetCurrentUser()
    }
  },
  methods: {
    received(data) {
      GetTaskManagementDetail2(data)
        .then(res => {
          this.getSpanArr(res.data)
          this.dialogFormData = data
          this.dialogData = res.data
          this.dialogVisible = true
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    getLoginPerson() {
      GetLoginPersonName().then(res => {
        this.filterQuery.execStaffID = res.data.employeeID
        this.filterQuery.execStaffName = res.data.name
        this.loaddata(this.filterQuery)
      })
    },
    toExecuteTask(data) {
      this.$router.push({ name: 'ExecuteTask', params: { taskRow: data } })
    },
    acceptTask(row) {
      this.received(row)
    },
    toCQTaskManagementIndex2(data) {
      this.$router.push({
        name: 'CQTaskManagementIndex2',
        params: { taskRow: data, tip: 2 }
      })
    },
    handlePageChange(page) {
      this.filterQuery.pageIdx = page
      this.loaddata(this.filterQuery)
    },
    handleClick() {
      if (this.filterQuery.startDate)
        this.filterQuery.startDate =
          this.filterQuery.startDate.slice(0, 10) + ' 00:00:00'
      if (this.filterQuery.endDate)
        this.filterQuery.endDate =
          this.filterQuery.endDate.slice(0, 10) + ' 23:59:59'
      if (!this.filterQuery.status) this.filterQuery.status = ''
      this.loaddata(this.filterQuery)
    },
    loaddata(filterQuery) {
      ExcTask(filterQuery)
        .then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    getSpanArr(data) {
      this.spanArr.push(1)
      let pos = 0
      for (let i = 1; i < data.length; i++) {
        if (data[i].taskType === data[i - 1].taskType) {
          this.spanArr[pos]++
          this.spanArr[i] = 0
        } else {
          this.spanArr[i] = 1
          pos = i
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: this.spanArr[rowIndex],
          colspan: this.spanArr[rowIndex] > 0 ? 1 : 0
        }
      }
    },
    handleSubmit() {
      let date = new Date()
      let month =
        date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() <= 9 ? '0' + date.getDate() : date.getDate()
      let receiveDate = date.getFullYear() + '-' + month + '-' + day
      let data = {
        status: '已接收',
        supervisionTaskCode: this.dialogFormData.supervisionTaskCode,
        receiveDate: receiveDate
      }
      ReceiveTask(data)
        .then(res => {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.dialogData = []
          this.spanArr = []
          this.dialogVisible = false
          this.loaddata(this.filterQuery)
        })
        .catch(e => {
          this.$message.error(e.message)
        })
    },
    cancelDialog() {
      this.dialogData = []
      this.spanArr = []
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
</style>